<template>
  <div class="icon-container">
    <div class="microbe-icon" id="virus" @click="downloadFiles('bacteria')">
      <p style="margin: 20px 0; letter-spacing: 2px">Bacteria</p>
      <el-icon
        size="24"
        style="border: 1px solid #213547"
        class="microbeDownloadIcon"
      >
        <Download />
      </el-icon>
    </div>
    <div class="microbe-icon" id="bacteria" @click="downloadFiles('virus')">
      <p style="margin: 20px 0; letter-spacing: 2px">Viruses</p>
      <el-icon
        size="24"
        style="border: 1px solid #213547"
        class="microbeDownloadIcon"
      >
        <Download />
      </el-icon>
    </div>

    <div class="microbe-icon" id="fungus" @click="downloadFiles('fungi')">
      <p style="margin: 20px 0; letter-spacing: 2px">Fungi</p>
      <el-icon
        size="24"
        style="border: 1px solid #213547"
        class="microbeDownloadIcon"
      >
        <Download />
      </el-icon>
    </div>
  </div>
  <div style="width: 100%; position: relative; height: 30px">
    <el-input
      placeholder="Please input Organism name"
      v-model="searchState.genemoId"
      clearable
      @clear="clearData"
      style="width: 300px; position: absolute; right: 0"
    >
      <template #append>
        <el-button :icon="Search" @click="getData" /> </template
    ></el-input>
  </div>
  <div class="rowItem">
    <div class="box">
      <!-- <el-scrollbar height="600px"> -->
      <div class="left">
        <div class="contentBox">
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span style="font-size: 20px">Microbe</span>
              </div>
            </template>
            <ul>
              <li
                style="cursor: pointer"
                @click="changeMicrobe(item.value, 'Microbe')"
                v-for="item in microbeList"
                :key="item.label"
                :class="{ active: searchState.type == item.value }"
              >
                <div>{{ item.label }}</div>
                <div v-if="searchState.type == item.value">
                  {{ typeTotal }}
                </div>
              </li>
            </ul>
          </el-card>
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span style="font-size: 20px">kingdoms</span>
              </div>
            </template>
            <ul>
              <li
                style="cursor: pointer"
                @click="changeKingdoms(item.name)"
                v-for="item in selectOptions.kingdoms"
                :key="item"
                :class="{ active: searchState.kingdoms == item.name }"
              >
                <div>{{ item.name }}</div>
              </li>
              <el-pagination
                size="small"
                v-if="itemTotal.kingdomsTotal > 0"
                :pageSize="searchState.pageSize"
                @change="changPage('kingdoms', $event)"
                background
                layout="prev, pager, next"
                :total="itemTotal.kingdomsTotal"
                class="mt-4"
              />
            </ul>
          </el-card>
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span style="font-size: 20px">Phylum</span>
              </div>
            </template>
            <ul>
              <li
                v-for="item in selectOptions.phylum"
                :key="item.name"
                style="cursor: pointer"
                @click="changePhylum(item.name)"
                :class="{ active: searchState.phylum == item.name }"
              >
                <div>{{ item.name }}</div>
              </li>
              <el-pagination
                v-if="itemTotal.phylumTotal > 0"
                size="small"
                :pageSize="searchState.pageSize"
                @change="changPage('Phylum', $event)"
                background
                layout="prev, pager, next"
                :total="itemTotal.phylumTotal"
                class="mt-4"
              />
            </ul>
          </el-card>
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span style="font-size: 20px">Class</span>
              </div>
            </template>
            <ul>
              <li
                v-for="item in selectOptions.class"
                @click="changeClass(item.name)"
                :key="item.name"
                style="cursor: pointer"
                :class="{ active: searchState.class == item.name }"
              >
                <div>{{ item.name }}</div>
              </li>
              <el-pagination
                size="small"
                v-if="itemTotal.classTotal > 0"
                :pageSize="searchState.pageSize"
                @change="changPage('class', $event)"
                background
                layout="prev, pager, next"
                :total="itemTotal.classTotal"
                class="mt-4"
              />
            </ul>
          </el-card>
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span style="font-size: 20px">Order</span>
              </div>
            </template>
            <ul v-loading="gLoading">
              <li
                v-for="item in selectOptions.order"
                @click="changeOrder(item.name)"
                :key="item.name"
                style="cursor: pointer"
                :class="{ active: searchState.order == item.name }"
              >
                <div>{{ item.name }}</div>
              </li>
              <el-pagination
                size="small"
                v-if="itemTotal.orderTotal > 0"
                :pageSize="searchState.pageSize"
                @change="changPage('gigaorder', $event)"
                background
                layout="prev, pager, next"
                :total="itemTotal.orderTotal"
                class="mt-4"
              />
            </ul>
          </el-card>
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span style="font-size: 20px">Family</span>
              </div>
            </template>
            <ul v-loading="gLoading">
              <li
                v-for="item in selectOptions.family"
                @click="changeFamily(item.name)"
                :key="item.name"
                style="cursor: pointer"
                :class="{ active: searchState.family == item.name }"
              >
                <div>{{ item.name }}</div>
              </li>
              <el-pagination
                size="small"
                v-if="itemTotal.familyTotal > 0"
                :pageSize="searchState.pageSize"
                @change="changPage('family', $event)"
                background
                layout="prev, pager, next"
                :total="itemTotal.familyTotal"
                class="mt-4"
              />
            </ul>
          </el-card>
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span style="font-size: 20px">Genus</span>
              </div>
            </template>
            <ul v-loading="gLoading">
              <li
                v-for="item in selectOptions.genus"
                @click="changeGenus(item.name)"
                :key="item.name"
                style="cursor: pointer"
                :class="{ active: searchState.genus == item.name }"
              >
                <div>{{ item.name }}</div>
              </li>
              <el-pagination
                size="small"
                v-if="itemTotal.genusTotal > 0"
                :pageSize="searchState.pageSize"
                @change="changPage('genus', $event)"
                background
                layout="prev, pager, next"
                :total="itemTotal.genusTotal"
                class="mt-4"
              />
            </ul>
          </el-card>
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span style="font-size: 20px">Species</span>
              </div>
            </template>
            <ul v-loading="gLoading">
              <li
                v-for="item in selectOptions.species"
                @click="changeSpecies(item.name)"
                :key="item.name"
                style="cursor: pointer"
                :class="{ active: searchState.species == item.name }"
              >
                <div>{{ item.name }}</div>
              </li>
              <el-pagination
                size="small"
                v-if="itemTotal.speciesTotal > 0"
                :pageSize="searchState.pageSize"
                @change="changPage('species', $event)"
                background
                layout="prev, pager, next"
                :total="itemTotal.speciesTotal"
                class="mt-4"
              />
            </ul>
          </el-card>
        </div>
      </div>
      <!-- </el-scrollbar> -->
    </div>

    <div class="" style="width: 73%">
      <div style="box-shadow: 2px 2px 4px 2px #d7d7d7">
        <el-table
          stripe
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%; font-size: 17px"
        >
          <el-table-column
            prop="ORGANISM_NAME"
            sortable
            label="Organism name"
            width="220"
          >
            <template #default="scope">
              <a
                style="color: #0c4270 !important"
                target="_blank"
                :href="`https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id=${scope.row.TAXID}`"
              >
                {{ scope.row.ORGANISM_NAME }}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="" label="Primer list" width="140">
            <template #header>
              <div class="downloadStyle">
                Primer list<img
                  @click="downloadAll('csv')"
                  class="downloadIcon"
                  src="@/assets/svg/download.svg"
                />
              </div>
            </template>
            <template #default="scope">
              <div class="downloadStyle">
                csv<img
                  @click="download('csv', scope.row)"
                  class="downloadIcon"
                  src="@/assets/svg/download.svg"
                />
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="TM" label="TM" width="100px" /> -->
          <el-table-column prop="" label="Gene annotation" width="190">
            <template #header>
              <div class="downloadStyle">
                Gene annotation<img
                  @click="downloadAll('gff')"
                  class="downloadIcon"
                  src="@/assets/svg/download.svg"
                />
              </div>
            </template>
            <template #default="scope">
              <div class="downloadStyle">
                gff<img
                  @click="download('gff', scope.row)"
                  class="downloadIcon"
                  src="@/assets/svg/download.svg"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="Genome" width="180">
            <template #header>
              <div class="downloadStyle">
                Genome<img
                  @click="downloadAll('fna')"
                  class="downloadIcon"
                  src="@/assets/svg/download.svg"
                />
              </div>
            </template>
            <template #default="scope">
              <div class="downloadStyle">
                fna<img
                  @click="download('fna', scope.row)"
                  class="downloadIcon"
                  src="@/assets/svg/download.svg"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="Specific genes">
            <template #header>
              <div class="downloadStyle">
                Specific genes<img
                  @click="downloadAll('bff')"
                  class="downloadIcon"
                  src="@/assets/svg/download.svg"
                />
              </div>
            </template>
            <template #default="scope">
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 200px;
                  justify-content: space-between;
                "
              >
                <div class="downloadStyle">
                  bed<img
                    @click="download('bed', scope.row)"
                    class="downloadIcon"
                    src="@/assets/svg/download.svg"
                  />
                </div>
                <div class="downloadStyle">
                  fa<img
                    @click="download('fa', scope.row)"
                    class="downloadIcon"
                    src="@/assets/svg/download.svg"
                  />
                </div>
                <div class="downloadStyle">
                  faa<img
                    @click="download('faa', scope.row)"
                    class="downloadIcon"
                    src="@/assets/svg/download.svg"
                  />
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div>
        <el-pagination
          v-model:current-page="pageState.page"
          v-model:page-size="pageState.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="->,sizes, prev, pager, next"
          :total="total"
          style="margin-bottom: 10px"
          @size-change="changePageSize"
          @current-change="changePage"
        />
      </div>
    </div>
  </div>
  <!-- info弹窗 -->
  <el-dialog
    v-model="infoModal"
    width="70%"
    style="margin-top: 20px !important"
  >
    <SearchInfoData :type="searchState.type" :id="searchState.id" />
  </el-dialog>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import {
  getGeneData,
  getGeneDataPhylum,
  getGeneDataClass,
  getGeneDataOrder,
  getGeneDataSearch,
  getGeneDataFamily,
  getGeneDataGenus,
  getGeneDataSpecies,
} from "@/api/search.js";
import { searchDownloadData } from "@/api/download.js";
import { geneBrowserData } from "@/api/jbrowseTable.js";
import { downLoadBlobFile } from "@/api/mange.js";
import { nextTick, onMounted, reactive, ref, watch, computed } from "vue";
import SearchInfoData from "@/components/SearchInfoData.vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { getHomeSearchData } from "@/api/search.js";
const route = useRoute();
// 查询数据
const searchState = ref({ type: "bacteria", pageSize: 5, page: 1 });
const loading = ref(false); //加载状态
// 详情数据
const infoModal = ref(false);
// 分页配置
const pageState = ref({
  page: 1,
  pageSize: 10,
});
const searchData = ref("");
const tableLoading = ref(false);
// 数据条数
const total = ref(0);
// 微生物数据
const tableData = ref([]);
// ---------------------
const microbeList = ref([
  { label: "Bacteria", value: "bacteria" },
  { label: "Viruses", value: "viruses" },
  { label: "Fungi", value: "fungi" },
]);
const genusList = ref([]);
const gLoading = ref(false);
const fLoading = ref(false);
const fiamilyList = ref([]);
const itemTotal = ref({
  kingdomsTotal: 0,
  phylumTotal: 0,
});
const rowStyle = () => {
  // 根据内容计算行高
  let baseHeight = 50; // 基础高度
  let contentHeight = Math.ceil(30 / 30) * 20; // 假设每30个字符增加20px
  if (pageState.value.pageSize == 10) {
    baseHeight = 100;
    // 根据内容计算行高
    contentHeight = Math.ceil(60 / 30) * 20; // 假设每30个字符增加20px
  }
  return {
    height: `${baseHeight + contentHeight}px`,
    "line-height": "1.5",
  };
};
watch(
  () => route,
  (newVal, oldVal) => {
    nextTick(() => {
      searchState.value.option = newVal.params.option;
      if (searchState.value.option) {
        fromHomeSearchData();
      } else {
        // search();
      }
      changeMicrobe("bacteria");
    });
  },
  {
    deep: true, // 深度监听
    immediate: true, //写上它，初始化时也会调用监听
  }
);
onMounted(() => {
  // 打印query参数
  const routeState = route.query;
  init();
  // changeKingdoms("bacteria"); // 当没有选择的时候默认选择bacteria
});
// 数据初始化
const init = async () => {
  const searchData = {
    type: "bacteria",
    pageSize: 5,
    page: 1,
  };
  let geneData = await getGeneData(searchData);
  loading.value = false;
  itemTotal.value.kingdomsTotal = geneData.data.count;
  selectOptions.value.kingdoms = geneData.data.data;
  searchState.value.kingdoms = geneData.data.data[0].name;
  // --获取phylum
  let phylumData = await getGeneDataPhylum({
    ...searchData,
    kingdoms: geneData.data.data[0].name,
  });
  itemTotal.value.phylumTotal = phylumData.data.count;
  selectOptions.value.phylum = phylumData.data.data;
  // searchState.value.phylum = phylumData.data.data[0].name;
  // // --获取Class
  // let classData = await getGeneDataClass({
  //   ...searchData,
  //   kingdoms: geneData.data.data[0].name,
  //   phylum: phylumData.data.data[0].name,
  // });
  // itemTotal.value.classTotal = classData.data.count;
  // selectOptions.value.class = classData.data.data;
  // searchState.value.class = classData.data.data[0].name;
  // // --获取Order
  // let orderData = await getGeneDataOrder({
  //   ...searchData,
  //   kingdoms: geneData.data.data[0].name,
  //   phylum: phylumData.data.data[0].name,
  //   class: classData.data.data[0].name,
  // });
  // itemTotal.value.orderTotal = orderData.data.count;
  // selectOptions.value.order = orderData.data.data;
  // searchState.value.order = orderData.data.data[0].name;
  // // --获取Family
  // let familyData = await getGeneDataFamily({
  //   ...searchData,
  //   kingdoms: geneData.data.data[0].name,
  //   phylum: phylumData.data.data[0].name,
  //   class: classData.data.data[0].name,
  //   order: orderData.data.data[0].name,
  // });
  // itemTotal.value.familyTotal = familyData.data.count;
  // selectOptions.value.family = familyData.data.data;
  // searchState.value.family = familyData.data.data[0].name;
  // // --获取Genus
  // let genusData = await getGeneDataFamily({
  //   ...searchData,
  //   kingdoms: geneData.data.data[0].name,
  //   phylum: phylumData.data.data[0].name,
  //   class: classData.data.data[0].name,
  //   order: orderData.data.data[0].name,
  //   family: familyData.data.data[0].name,
  // });
  // itemTotal.value.genusTotal = genusData.data.count;
  // selectOptions.value.genus = genusData.data.data;
  // searchState.value.genus = genusData.data.data[0].name;
  // // --获取Species
  // let speciesData = await getGeneDataFamily({
  //   ...searchData,
  //   kingdoms: geneData.data.data[0].name,
  //   phylum: phylumData.data.data[0].name,
  //   class: classData.data.data[0].name,
  //   order: orderData.data.data[0].name,
  //   family: familyData.data.data[0].name,
  //   genus: genusData.data.data[0].name,
  // });
  // itemTotal.value.speciesTotal = speciesData.data.count;
  // selectOptions.value.species = speciesData.data.data;
  // searchState.value.species = speciesData.data.data[0].name;
  search();
};
const getData = () => {
  tableLoading.value = true;
  let params = {
    ...searchState.value,
    ...pageState.value,
  };
  geneBrowserData(params).then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.count;
    tableLoading.value = false;
  });
};
const clearData = () => {
  delete searchState.value.genemoId;
  search();
};
// 所有选择器数据
const selectOptions = ref({
  kingdoms: {},
});
// 根据首页搜索查询数据
const fromHomeSearchData = () => {
  let params = {
    ...searchState.value,
    ...pageState.value,
  };
  getHomeSearchData(params).then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.count;
  });
};

// 查询表单数据
const search = () => {
  tableLoading.value = true;
  let params = {
    ...searchState.value,
    ...pageState.value,
  };
  searchDownloadData(params).then((res) => {
    nextTick(() => {
      tableData.value = res.data.data;
      total.value = res.data.count;
      tableLoading.value = false;
    });
  });
};
// 改变页数
const changePage = (val) => {
  pageState.value.page = val;
  search();
};
// 改变页面查询数量
const changePageSize = (val) => {
  pageState.value.page = 1;
  search();
};
// 通过PrimerID获取详情
const getInfo = (row) => {
  searchState.value.id = row.id;
  // 打开弹窗
  infoModal.value = true;
  /*  router.push({
         path: '/search/summary',
         query: {
           id: row.id,
           type: searchState.value.type
         },
       }) */
};
// 获取界的数据
const getKingdoms = (text) => {
  loading.value = true;
  getGeneData(searchState.value).then(async (res) => {
    loading.value = false;
    itemTotal.value.kingdomsTotal = res.data.count;
    selectOptions.value.kingdoms = res.data.data;
    if (text) {
      searchState.value.kingdoms = res.data.data[0].name;
      // --获取phylum
      const data = await getGeneDataPhylum({
        ...searchState.value,
        kingdoms: searchState.value.kingdoms,
      });
      itemTotal.value.phylumTotal = data.data.count;
      selectOptions.value.phylum = data.data.data;
      search();
    }
  });
};
// 根据界获取门分类
const getPhylum = (val) => {
  getGeneDataPhylum(searchState.value).then((res) => {
    // 不为空的时候
    itemTotal.value.phylumTotal = res.data.count;
    selectOptions.value.phylum = res.data.data;
  });
};
// 根据门获取纲分类
const getClass = () => {
  loading.value = true;
  getGeneDataClass(searchState.value).then((res) => {
    loading.value = false;
    itemTotal.value.classTotal = res.data.count;
    selectOptions.value.class = res.data.data;
  });
};
// 根据门获取纲分类
const getGigaorder = () => {
  loading.value = true;
  getGeneDataOrder(searchState.value).then((res) => {
    loading.value = false;
    itemTotal.value.gigaorderTotal = res.data.count;
    selectOptions.value.order = res.data.data;
  });
};
// 根据目获取科分类
const getFamily = () => {
  loading.value = true;
  getGeneDataFamily(searchState.value).then((res) => {
    loading.value = false;
    itemTotal.value.familyTotal = res.data.count;
    selectOptions.value.family = res.data.data;
  });
};
// 根据科获取属信息
const getGenus = () => {
  loading.value = true;
  getGeneDataGenus(searchState.value).then((res) => {
    loading.value = false;
    itemTotal.value.genusTotal = res.data.count;
    selectOptions.value.genus = res.data.data;
  });
};
// 根据属获取种信息
const getSpecies = () => {
  loading.value = true;
  getGeneDataSpecies(searchState.value).then((res) => {
    loading.value = false;
    itemTotal.value.speciesTotal = res.data.count;
    selectOptions.value.species = res.data.data;
    if (!tableData.value || tableData.value.length == 0) {
      searchState.value.species = res.data.data[0].name;
      search();
    }
  });
};
/* 更改选择框数据 */
// 选择三大类
const changeMicrobe = (val, type) => {
  fLoading.value = true;
  searchState.value.type = val;
  total.value = 0;
  tableData.value = [];
  searchState.value.kingdoms = "";
  // 根据条件查询界并清空已选中的界
  getKingdoms(1);
  delete searchState.value.kingdoms;
  delete searchState.value.phylum;
  delete searchState.value.class;
  delete searchState.value.order;
  delete searchState.value.family;
  delete searchState.value.genus;
  delete searchState.value.species;
  // ----
  delete selectOptions.value.phylum;
  delete selectOptions.value.class;
  delete selectOptions.value.order;
  delete selectOptions.value.family;
  delete selectOptions.value.genus;
  delete selectOptions.value.species;
  // ----
  itemTotal.value.phylumTotal = 0;
  itemTotal.value.classTotal = 0;
  itemTotal.value.orderTotal = 0;
  itemTotal.value.familyTotal = 0;
  itemTotal.value.genusTotal = 0;
  itemTotal.value.speciesTotal = 0;
  // delete searchState.value.kingdoms;
  // delete searchState.value.phylum;
  // delete searchState.value.class;
  // delete searchState.value.order;
  // delete searchState.value.family;
  // delete searchState.value.genus;
  // delete searchState.value.species;
  // let params = { type: val, order: "NAN" };
  // getGeneDataFamily(params).then((res) => {
  //   fiamilyList.value = res.data.data;
  //   fLoading.value = false;
  // });
  search(type);
};
// 选择Kingdom
const changeKingdoms = (val) => {
  if (searchState.value.kingdoms) {
    delete searchState.value.phylum;
    delete searchState.value.class;
    delete searchState.value.order;
    delete searchState.value.family;
    delete searchState.value.genus;
    delete searchState.value.species;
    selectOptions.value.phylum = [];
    selectOptions.value.class = [];
    selectOptions.value.order = [];
    selectOptions.value.family = [];
    selectOptions.value.genus = [];
    selectOptions.value.species = [];
    itemTotal.value.phylumTotal = 0;
    itemTotal.value.classTotal = 0;
    itemTotal.value.orderTotal = 0;
    itemTotal.value.familyTotal = 0;
    itemTotal.value.genusTotal = 0;
    itemTotal.value.speciesTotal = 0;
  }
  // 根据条件查询界并清空已选中的界
  searchState.value.kingdoms = val;
  getPhylum(val);
  search();
};
// 选择Phylum
const changePhylum = (val) => {
  if (searchState.value.phylum) {
    delete searchState.value.order;
    delete searchState.value.family;
    delete searchState.value.genus;
    delete searchState.value.species;
    selectOptions.value.order = [];
    selectOptions.value.family = [];
    selectOptions.value.genus = [];
    selectOptions.value.species = [];
    itemTotal.value.orderTotal = 0;
    itemTotal.value.familyTotal = 0;
    itemTotal.value.genusTotal = 0;
    itemTotal.value.speciesTotal = 0;
  }
  searchState.value.phylum = val;
  searchState.value.class = "";
  getClass();
  search();
};
// 选择Class
const changeClass = (val) => {
  if (searchState.value.class) {
    delete searchState.value.family;
    delete searchState.value.genus;
    delete searchState.value.species;
    selectOptions.value.family = [];
    selectOptions.value.genus = [];
    selectOptions.value.species = [];
    itemTotal.value.familyTotal = 0;
    itemTotal.value.genusTotal = 0;
    itemTotal.value.speciesTotal = 0;
  }
  searchState.value.class = val;
  searchState.value.order = "";
  getGigaorder();
  search();
};
// 选择Gigaorder
const changeOrder = (val) => {
  if (searchState.value.order) {
    delete searchState.value.genus;
    delete searchState.value.species;
    selectOptions.value.genus = [];
    selectOptions.value.species = [];
    itemTotal.value.genusTotal = 0;
    itemTotal.value.speciesTotal = 0;
  }
  searchState.value.order = val;
  searchState.value.family = "";
  getFamily();
  search();
};
// 选择Family
const changeFamily = (val) => {
  if (searchState.value.family) {
    delete searchState.value.species;
    selectOptions.value.species = [];
    itemTotal.value.speciesTotal = 0;
  }
  searchState.value.family = val;
  searchState.value.genus = "";
  getGenus();
  search();
};
// 选择Genus
const changeGenus = (val) => {
  searchState.value.genus = val;
  searchState.value.species = "";
  getSpecies();
  search();
};
// 选择Species
const changeSpecies = (val) => {
  searchState.value.species = val;
  search();
};

// 下载文件
const downloadFiles = (params) => {
  let downloadTag = document.createElement("a");
  downloadTag.target = "_blank";
  downloadTag.href = "";
  if (params == "bacteria") {
    downloadTag.href =
      "https://file.primerbanks.com/download/primer_bank_bacteria_4w_v6.6.1.csv.gz";
  } else if (params == "virus") {
    downloadTag.href =
      "https://file.primerbanks.com/download/primer_bank_virus_v6.6.1.csv.gz";
  } else if (params == "fungi") {
    downloadTag.href =
      "https://file.primerbanks.com/download/primer_bank_fungi_v6.csv.gz";
  }
  document.body.appendChild(downloadTag);
  downloadTag.click();
};

const changeFiamily = (val, type) => {
  gLoading.value = true;
  let params = {
    type: searchState.value.type,
    family: val,
  };
  searchState.value.family = val;
  getGeneDataGenus(params).then((res) => {
    genusList.value = res.data.data;
    gLoading.value = false;
  });
  search();
};
const download = (fileType, row) => {
  let params = {
    type: searchState.value.type,
    fileType,
    taxId: row.TAXID,
  };
  let url = `/geneData/downLoadOneRecord/${params.type}/${params.fileType}/${params.taxId}`;
  downLoadBlobFile(url);
};
// 下载全部
const downloadAll = (fileType) => {
  let params = {
    ids: "",
    type: searchState.value.type,
    fileType,
  };
  let data = [];
  if (tableData.value.length > 0) {
    tableData.value.forEach((item) => {
      console.log("item", item);
      data.push(item.TAXID);
    });
    params.ids = data.join(",");
    downLoadBlobFile(
      `/geneData/downLoadBatchRecord/${params.type}/${params.fileType}/${params.ids}`
    );
  } else {
    ElMessage({
      message: "当前无数据",
      type: "error",
    });
  }
};
const changPage = (type, val) => {
  searchState.value.page = val;
  switch (type) {
    case "kingdoms":
      getKingdoms();
      break;
    case "Phylum":
      getPhylum();
      break;
    case "class":
      getClass();
      break;
    case "gigaorder":
      getGigaorder();
      break;
    case "family":
      getFamily();
      break;
    case "genus":
      getGenus();
      break;
    case "species":
      getSpecies();
      break;
    default:
      break;
  }
};
</script>
<style scoped lang="scss">
ul {
  list-style: none;
}

ul li {
  display: flex;
  justify-content: space-between;
  line-height: 25px;
}

.rowItem {
  display: flex;

  justify-content: space-between;
  margin-top: 20px;
}

.rowItem .box {
  width: 25%;

  // padding: 20px;
  &:nth-child(2) {
    width: 73%;
  }
}

.box {
  /* height: 200px; */

  /* border: 1px solid #d7d7d7; */
  /* padding: 20px; */
  box-shadow: 2px 2px 4px 2px #d7d7d7;
  margin-bottom: 30px;

  &:first-child {
    box-shadow: none;
  }
}

::v-deep .el-icon {
  border: none !important;
}

::v-deep .el-pager li.is-active {
  background: #0c4270 !important;
}

.whole-line {
  width: 100%;
  box-sizing: content-box;

  .header {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #d7d7d7;
  }

  .contentBox {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    text-align: left;

    .left,
    .conter,
    .right {
      width: 30%;

      .title {
        padding: 10px;
        border-top: 2px solid #d7d7d7;
        border-bottom: 2px solid #d7d7d7;
      }
    }
  }
}

::v-deep .el-table__header {
  height: 60px !important;
}

::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background-color: #eff5fa;
}

::v-deep tr {
  line-height: 100px !important;
}

li:hover {
  border-bottom: 1px solid #0c4270;
}

::v-deep .el-dialog {
}

.typeBox {
  border: 1px solid #585858;
  width: 50%;
  margin: 0 auto;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;

  &:hover {
    background: #e9e9e9;
  }
}

// 树状选中效果
.active {
  border-bottom: 1px solid #0c4270;
}

.downloadStyle {
  display: flex;
  align-items: center;

  .downloadIcon {
    height: 20px;
    width: 20px;
    cursor: pointer;
    margin-left: 5px;
  }
}

.el-pagination {
  margin-top: 20px;
}

::v-deep .el-card__body {
  padding: 0 15px;
  font-size: 15px;
}

::v-deep .el-pager li.is-active,
.el-pager li {
  color: #fff !important;
}

::v-deep .el-pager li.is-active,
.el-pager li {
  color: #fff !important;
}

::v-deep .el-card__header {
  padding: 8px;
  background-color: #0c4270 !important;
  color: #fff;
  font-weight: bold;
}

::v-deep .el-table__header th {
  background-color: #0c4270 !important;
  color: #fff;
}
</style>
<style>
.icon-container {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  gap: 2rem;
  padding: 20px 0 10px 0;
}

.microbeDownloadIcon {
  margin-left: 10px;
}

.microbe-icon {
  padding: 0 10px;
  /* width: 120px; */
  height: 60px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  justify-content: space-evenly;
  line-height: 25px;
  align-items: center;
  font-size: 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  box-shadow: 5px 5px 10px #d1d1d1, -5px -5px 10px #ffffff;
  color: #fff !important;
}

.microbe-icon:hover {
  transform: scale(1.1);
}

/* ϸ��ͼ�� */
#bacteria {
  background: linear-gradient(145deg, #2e9acb, #29c7ac);
}

/* ����ͼ�� */
#virus {
  background: linear-gradient(145deg, #ff6b35, #ff3366);
}

/* ���ͼ�� */
#fungus {
  background: linear-gradient(145deg, #ffd166, #ffa62b);
}

.contentBox {
  li {
    font-size: 18px !important;
  }
}
</style>